<template>
  <div>
    <el-card>
      <LiveOverview :tabs="realTimeData" @refresh="handleRefresh">
        <div slot="search">
          <p class="mb-5 ft-12">
            <span style="color: #fc4560">*</span>
            <span>默认显示全部，可根据月份进行筛选</span>
          </p>

          <SearchForm
            :form-option="formOption"
            :show-btn="true"
            :showArrow="false"
            :btn-list="btnList"
            v-model="formOption.data"
            label-width="90px"
          />
        </div>
      </LiveOverview>
    </el-card>
    <el-card class="mt-20">
      <LineChart
        :title="title"
        :xAxis="xAxis"
        :yAxis="yAxis"
        :legend="legend"
        :series-data="seriesData"
        :color="color"
      />
    </el-card>
  </div>
</template>

<script>
import { useFilterStatistics } from '@/hooks'
export default {
  name: 'FinanceStatistics',
  data() {
    return {
      // 表单搜索配置
      formOption: {
        items: [
          {
            type: 'monthrange',
            label: '结算月份',
            value: 'time',
            format: 'yyyy-MM',
            valueFormat: 'yyyy-MM'
          }
        ],
        data: {
          time: []
        }
      },
      // 表单按钮列表
      btnList: [
        {
          type: 'primary',
          label: '筛选',
          onClick: () => {
            this.handleRefresh()
          }
        },
        {
          label: '重置',
          onClick: () => {
            this.formOption.data = {}
            this.handleRefresh()
          }
        }
      ],
      // 实时刷新数据项
      realTimeData: [
        {
          isShow: true,
          baseData: {
            value: '',
            key: 'totalIncomeAmount',
            label: '平台累计支入积分'
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '各平台累计支入好物积分'
          },
          yesterdayData: {
            key: 'totalIncomeAmount',
            isShow: true,
            value: '',
            isUnit: {
              startText: '上月'
            }
          },
          path: '/integral/integral_settlement/data_overview_detail'
        },
        {
          isShow: true,
          baseData: {
            key: 'incomeNum',
            label: '平台累计支入笔数',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '各平台累计支入笔数'
          },
          yesterdayData: {
            key: 'incomeNum',
            isShow: true,
            value: '',
            isUnit: {
              startText: '上月'
            }
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'platformEtpNum',
            label: '接入平台企业主数',
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            value: '',
            key: 'totalOutlayAmount',
            label: '累计兑换积分'
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '客户在平台兑换好物积分'
          },
          yesterdayData: {
            key: 'totalOutlayAmount',
            isShow: true,
            value: '',
            isUnit: {
              startText: '上月'
            }
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'exchangeOrderNum',
            label: '累计兑换订单数',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '客户在平台兑换订单数'
          },
          yesterdayData: {
            key: 'exchangeOrderNum',
            isShow: true,
            value: '',
            isUnit: {
              startText: '上月'
            }
          }
        }
      ],
      // 走势折线图相关
      title: {
        text: '月度积分支入&支出数据走势'
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      legend: {
        icon: 'circle',
        data: ['支入', '支出']
      },
      color: ['#7aa3ef', '#fc4541'],
      seriesData: []
    }
  },
  created() {
    this.handleRefresh()
  },
  methods: {
    //刷新数据
    handleRefresh() {
      this.handleSettlementStatistics()
      this.handleIntegralTrend()
    },
    //获取参数
    handleParams() {
      let params = {}
      const { time } = this.formOption.data
      if (time && time.length) params.startMonth = time[0]
      if (time && time.length) params.endMonth = time[1]
      return params
    },
    //获取积分结算-数据概况-折线图
    async handleIntegralTrend() {
      const params = this.handleParams()
      const { data } = await this.$http.integral.integralSettlementApi.getIntegralTrend(params)
      console.log(data)
      this.seriesData = [
        {
          name: '支入',
          type: 'line',
          data: data.map(item => item.incomeAmount)
        },
        {
          name: '支出',
          type: 'line',
          data: data.map(item => item.outlayAmount)
        }
      ]
      this.xAxis.data = data.map(item => item.date)
    },
    // 获取积分结算-数据概况
    async handleSettlementStatistics() {
      const params = this.handleParams()
      const { data } = await this.$http.integral.integralSettlementApi.getIntegralStatistics(
        params
      )

      // 统计数据
      const realTimeData = {
        baseData: {
          ...data.baseData,
          platformEtpNum: data.platformEtpNum
        },
        yesterdayData: { ...data.yesterdayData }
      }

      const { time } = this.formOption.data
      const flag = time && time.length ? false : true
      this.realTimeData = useFilterStatistics(this.realTimeData, realTimeData, flag)
    }
  }
}
</script>
